<template>
  <div style="margin-right:10px;overflow-y: scroll;height:98%">
    <Card>
      <img class="closeImg" @click="close" src="../assets/image/close.png" />
      <div class="img">
<!--         <img src="../assets/image/1.png" />
        <img src="../assets/image/2.png" /> -->
        <!-- <img src="http://static.bowu66.com/wenlv/houtai/1.png" />
        <img src="http://static.bowu66.com/wenlv/houtai/2.png" /> -->
        <img src="https://museum-voice.bowu66.com/image/wenlvhoutai/1.png" />
        <img src="https://museum-voice.bowu66.com/image/wenlvhoutai/2.png" />
      </div>
    </Card>
    <Card style="margin-top:10px">
      <p class="title">您需要完成以下步骤</p>
      <a :href="href">
        <div class="download">
          <p style="color:#19be6b">
            <span>第一步：</span>文旅绿码观众分时预约系统合作协议word文档下载
          </p>
          <Icon size="20" type="md-cloud-download" />
        </div>
      </a>
      <p style="line-height: 30px;">第二步：签署协议，加盖公章后，上传合作协议扫描件 (格式：png、jpg、jpeg等)。</p>
      <vue-uploadimgmore2
        style="margin-top:10px;margin-bottom:15px;"
        :imgUrl="imgurl"
        :clear="clear"
        @uploadImg="uploadImg"
      ></vue-uploadimgmore2>
      <Button type="primary" :loading="loading" @click="submit">第三步：提交扫描件</Button>
      <Button type="error" @click="close">关闭此页面</Button>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl: [],
      clear: false,
      loading: false,
      href:
        "http://static.bowu66.com/file/%E6%96%87%E6%97%85%E7%BB%BF%E7%A0%81%E8%A7%82%E4%BC%97%E5%88%86%E6%97%B6%E9%A2%84%E7%BA%A6%E7%B3%BB%E7%BB%9F%E4%BD%BF%E7%94%A8%E5%8D%8F%E8%AE%AE%EF%BC%8820200329%EF%BC%89.doc"
    };
  },
  methods: {
    uploadImg(data) {
      this.imgurl = [];
      for (let i = 0; i < data.length; i++) {
        this.imgurl.push({
          url: data[i].url,
          name: data[i].name
        });
      }
    },
    submit() {
      this.loading = true;
      let fileUrl = [];
      for (let i = 0; i < this.imgurl.length; i++) {
        fileUrl.push(this.imgurl[i].url);
      }
      this.$http(
        "/stage/protocol/saveMuseumProtocol",
        {
          fileUrl: fileUrl.join(",")
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.$Message.success("提交成功");
            this.$emit("hasSubmitProtocol");
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading = false;
        }
      );
    },
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 22px;
  margin-top: 20px;
}
.download {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  margin-top: 5px;
}
.download p {
  margin-right: 5px;
  line-height: 30px;
}
.download span {
  color: black;
}
.img {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.img img {
  width: 49.5%;
}
.closeImg {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.closeImg:hover {
  opacity: 0.8;
}
</style>